<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
    </style>
</head>
<body>
<!--class bind-->
<div class="div1" v-bind:class="{red: isRed,blue:isBlue}">
    {{massage}}
    <br>
    <input type="text" v-model="FontSize">
    <div class="data">
        {{massage}}
    </div>
</div>

<!--style bind-->
<div class="div2" v-bind:style="[styleObject,baseStyleObject]"> 列表绑定
    <!--<div class="div2" v-bind:style="styleObject">-->
    {{massage}}
</div>


</body>
<script src="../lib/vue.js"></script>
<script>
    /*
    * 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。
    * 因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
    * 不过，字符串拼接麻烦且易错。
    * 因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
    * 表达式结果的类型除了字符串之外，还可以是对象或数组。
    */

    vm = new Vue({
        el: '.div1',
        data: {
            value: 'black',
            massage: '今天要开始学习Vue了',
            isRed: false,
            isBlue: false
        },
        watch: {
            value: function (val) {
                if (val === 'blue') {
                    this.isBlue = true
                } else if (this.value === 'red') {
                    this.isRed = true
                }
            }
        }
    })
    var data = document.querySelector('div.data')
    vm.$watch('value', function (newValue, oldValue) {
        data.innerHTML = '原来的颜色' + oldValue + '<br>' + '新的颜色' + newValue
    })

    styleObject = {
        color: 'red',
        fontSize: '50px'
    }
    new Vue({
        el: '.div2',
        data: {
            massage: 'zyd',
            styleObject: {
                color: 'red',
                fontSize: '30px'
            },
            baseStyleObject: {
                width: '100%',
                backgroundColor: 'pink'
            }
        }
    })

    /*
todo 多重值
2.3.0+
从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
*/
</script>
</html>